<template>
    <div class="choose_info">
		<div class="header">
			<van-nav-bar
				title="区（县）"
        @click-left="onClickLeft"
				/>
		</div>
        <div class="choose_content">
            <van-button type="default"
                        v-for="(item,i) in items"
                        :class="{'active':isActive==i}"
                        :key="i"
                        @click="dianji(i,item.area_id)"
            >{{item.area_name}}</van-button>

        </div>
        <div class="clear"></div>
        <div class="choose_foot">
            <van-button type="primary" @click="pre()">上一步</van-button>
            <van-button type="info" @click="next()">下一步</van-button>
        </div>
	</div>
</template>
<script>
export default {
    data() {
        return {
            provinceId:'',
            cityId:'',
            items:[],
            isActive:-1,
            areaId:''
        }
    },
    mounted:function(){
        this.provinceId = this.$route.query.provinceId;
        this.cityId = this.$route.query.cityId;
        this.get_areas();
    },
    methods:{
        pre(){
            this.$router.back(-1)
        },
        onClickLeft(){
            this.$router.back(-1)
        },
        get_areas(){
            const that = this;
            this.$sendRequest('/v2/get_areas',"city_id="+that.cityId).then(function(res){
                console.log(res.data);
                that.items = res.data.result.areas;
            })
        },
        next(){
            var provinceId = this.provinceId;
            var cityId = this.cityId;
            var areaId = this.areaId;
            if(areaId == ''){
                this.$toast("请选择区县");
                return false;
            }
            this.$router.push({
                path:'/choosejie',
                query:{provinceId:this.provinceId,cityId:this.cityId,areaId:this.areaId}
            })

        },
        dianji(i,areaId){
            this.isActive = i;
            this.areaId = areaId;
        }
    }
}
</script>
<style scoped="scoped">
  .active{
    border: 1px solid #4C9FFD;
    color: #ffffff !important;
    background-color:#4C9FFD;
  }
    .choose_info{
        height: 100vh;
        background-color: #fff;
    }
    .clear{
        clear: both;
    }
	.header>>>.van-cell__title{
		  width: 63px !important;
	}
	.header >>> .van-icon-arrow-left{
		color: #2c3e50;
	}
    .choose_content {
        width: 100%;
        box-sizing: border-box;
        padding: 0.5vh 4.6vw;
        padding-top: 2.3vh;
    }
    .choose_content >>> .van-button--default{
      width: 41.4vw;
      height: 6.6vh;
      box-sizing: border-box;
      border: 1px solid #4C9FFD;
      color: #4C9FFD;
      /*background-color: rgb(242, 242, 242);*/

      border-radius: 6px;
      margin: 1.2vh 2vw;
      float: left;
      font-size: 0.95rem;
    }
    /* .van-button::after{
        background-color: #4C9FFD;
    } */
    .choose_foot{
        width: 100%;
        box-sizing: border-box;
        padding: 0;
        position:fixed;
        bottom: 0;
    }
    .choose_foot >>>.van-button--info{
        width: 50vw;
        margin: 0 ;
        border-radius: 0;
        float: left;
    }
    .choose_foot >>>.van-button--primary{
        width: 50vw;
        margin: 0 ;
        border-radius: 0;
        float: left;
        background: rgb(204, 204, 204);
        border:rgb(204, 204, 204);
    }
</style>

